<template>
  <div class="container">
    <div class="toolboxContainer">
      <my-drag class="myToolbox" id="toolbox1" target="#map3d" handle=".el-card__header">
        <el-card shadow="hover" :body-style="{ padding: '0 15px' }">
          <div slot="header" class="clearfix">
            <span><i class="header-icon el-icon-set-up"></i>　工具箱-1</span>
          </div>
          <div class="text item">
            <el-collapse v-model="activeNames" @change="doSthWhenCollapseChanged" style="border-top: none;">
              <!-- -->
              <el-collapse-item name="symbolEntities">
                <template slot="title">
                  <i class="header-icon el-icon-map-location"></i>　符号标注
                </template>
                <el-checkbox @change="toggleShowOrHideBeijingPositionBillboard"
                             v-model="isBeijingPositionBillboardChecked"
                             label="圈出北京市位置">
                </el-checkbox>
                <el-checkbox-group v-model="myCheckboxGroup" size="mini" >
                  <el-checkbox label="xx选项1" disabled></el-checkbox>
                  <el-checkbox label="xx选项2" disabled></el-checkbox>
                </el-checkbox-group>
              </el-collapse-item>
              <!-- -->
              <el-collapse-item name="watermarkOptions">
                <template slot="title">
                  <i class="header-icon el-icon-magic-stick"></i>　水印设置
                </template>
                <label>
                  <input type="checkbox" @change="toggleShowOrHideCompanyLogo" v-model="isCompanyLogoChecked"/>添加公司logo水印
                </label>
                <div v-show="isCompanyLogoChecked">
                  <table>
                    <tbody>
                    <tr>
                      <td class="mySliderLabelText">水印不透明度：</td>
                      <td class="mySlider">
                        <el-slider v-model="intLogoLayerAlpha" :format-tooltip="mySliderFormat"
                                   @input="setCompanyLogoLayerAlpha">
                        </el-slider>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </el-collapse-item>
            </el-collapse>
            <!-- -->
            <div v-if="activeNames.length >= 2" class="text item">
              <el-button type="text" style="width:100%;height:20px;font-size:10px;padding:0;" @click="collapseAll">
                <i class="el-icon-caret-top"></i> 全部收起
              </el-button>
            </div>
          </div>
        </el-card>
      </my-drag>
    </div>

    <div class="mapTest" :style="mapWindowStyle">
      <div id="map3d">
      </div>
    </div>
    <h1 class="pageTitle">Cesium 地球-北京地图</h1>

  </div>
</template>

<script>
import MyDrag from '../components/MyDrag.vue'
import * as Cesium from 'cesium'
const VIEW_RECTANGLE= Cesium.Rectangle.fromDegrees(100, 10, 120, 70);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = VIEW_RECTANGLE;
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.3

// import {getCesiumAccessToken} from '@/util.js'
// console.log('bbbbb')
// console.log(Cesium.Ion.defaultAccessToken)
// const Token = getCesiumAccessToken();
// if (Token) {
//   Cesium.Ion.defaultAccessToken = Token
// }
// console.log('aaaaaaaa')
// console.log(Cesium.Ion.defaultAccessToken)
const DEFAULT_ALPHA = 100 // 不透明度，取值范围整数0-100对应：0%=完全透明；100%=不透明
export default {
  name: 'Map3DDemo',
  components: {
    MyDrag,
  },
  data() {
    return {
      activeNames: [],
      map3d: null,
      url: "",
      attr: "",
      intLogoLayerAlpha: DEFAULT_ALPHA, // 整数不透明度，取值范围0-100对应：0%=完全透明；100%=不透明
      logoLayerAlpha: (DEFAULT_ALPHA % 101) * 0.01,// 浮点数不透明度，取值范围0-1.00
      logoLayer: null,
      logoLayerProvider: null,
      isCompanyLogoChecked: true,
      isBeijingPositionBillboardChecked: true,
      myEntities: {
        beijing: null,
      },
      viewer: null,
      // screenHeight: document.body.clientHeight,
      mapWindowStyle: {
        height: '0px'
      }
    }
  },
  methods: {
    collapseAll() {
      this.activeNames = []
    },
    doSthWhenCollapseChanged(val) {
      // console.log(val);
    },
    mySliderFormat(value){
      return value.toString() + '%'
    },
    setCompanyLogoLayerAlpha(alpha) {
      this.logoLayerAlpha = (this.intLogoLayerAlpha % 101)* 0.01
      if (!this.isCompanyLogoChecked) {
        return
      }
      this.logoLayer.alpha = this.logoLayerAlpha
    },
    toggleShowOrHideCompanyLogo() {
      let layers = this.viewer.scene.imageryLayers
      if (!this.isCompanyLogoChecked) {
        layers.remove(this.logoLayer, true)
        this.logoLayer = null
        return
      }
      this.logoLayer = layers.addImageryProvider(this.logoLayerProvider)
      this.logoLayer.alpha = this.logoLayerAlpha
    },
    toggleShowOrHideBeijingPositionBillboard() {
      let entities = this.viewer.entities
      if (!this.isBeijingPositionBillboardChecked) {
        entities.remove(this.myEntities.beijing)
        return
      }
      entities.add(this.myEntities.beijing)
    },
    getHeight() {
      this.mapWindowStyle.height = String(window.innerHeight - 100) + 'px';
    }
  },
  created(){
    window.addEventListener('resize', this.getHeight);
    this.getHeight()
  },
  mounted() {

    //加载本机 WeServer 发布的高程数据
    let terrain = new Cesium.CesiumTerrainProvider({
      url: '/static/TerrainProvider',
      isGoogleCustom: true
    });

    //加载本机 WeServer 发布的影像瓦片
    // 'http://localhost:80/WeServer/wmts/1.0.0/acimage/default/mercator/{z}/{y}/{x}.jpg'
    // 墨卡托坐标系：
    let imageprovider = new Cesium.WebMapTileServiceImageryProvider({
      url : 'http://localhost:80/WeServer/wmts',
      layer : 'acimage',
      style : 'default',
      format : 'image/jpeg',
      tileMatrixSetID : 'mercator',
      //tileMatrixLabels : ['default028mm:0', 'default028mm:1', 'default028mm:2' ...],
      credit : new Cesium.Credit('卫星影像提供商某某公司A 甲测资字12345-A'),
      maximumLevel: 9
    });

    //加载本机 WeServer 发布的地名标签
    // 'http://localhost:80/WeServer/wmts/1.0.0/aclabel/default/wgs84/{z}/{y}/{x}.png'
    // 墨卡托坐标系：
    let labellayer = new Cesium.WebMapTileServiceImageryProvider({
      url : 'http://localhost:80/WeServer/wmts',
      layer : 'aclabel',
      style : 'default',
      format : 'image/png',
      tileMatrixSetID : 'mercator',
      //tileMatrixLabels : ['default028mm:0', 'default028mm:1', 'default028mm:2' ...],
      credit : new Cesium.Credit('标签层数据提供商某某公司B 甲测资字12345-B'),
      maximumLevel: 9
    });

    //北京市局部地图
    //http://localhost:8080/geoserver/gwc/service/wmts?layer=topp%3Abeijing&style=raster&tilematrixset=mercator&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=12&TileCol=3372&TileRow=1551
    let beijingLayer = new Cesium.WebMapTileServiceImageryProvider({
      url : 'http://localhost:8080/geoserver/gwc/service/wmts',
      layer : 'topp:beijing',
      style : '',
      format : 'image/png',
      tileMatrixSetID : 'mercator',
      // tileMatrixLabels : ['default028mm:0', 'default028mm:1', 'default028mm:2' ...],
      tileMatrixLabels : [
        '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
        '10', '11', '12', '13'
      ],
      credit : new Cesium.Credit('北京市卫星影像提供商某某公司C 甲测资字12345-C'),
      // minimumLevel: 0,
      maximumLevel: 12
    });

    // let ne50mLandLayer = new Cesium.WebMapTileServiceImageryProvider({
    //   url : 'http://localhost:8080/geoserver/gwc/service/wmts',
    //   layer : 'topp:ne_50m_land',
    //   style : '',
    //   format : 'image/png',
    //   tileMatrixSetID : 'EPSG:900913',
    //   tileMatrixLabels : [
    //   'EPSG:900913:0', 'EPSG:900913:1', 'EPSG:900913:2', 'EPSG:900913:3',
    //   'EPSG:900913:4', 'EPSG:900913:5', 'EPSG:900913:6', 'EPSG:900913:7',
    //   'EPSG:900913:8', 'EPSG:900913:9', 'EPSG:900913:10', 'EPSG:900913:11',
    //   ],
    //   //tileMatrixLabels : ['default028mm:0', 'default028mm:1', 'default028mm:2' ...],
    //   credit : new Cesium.Credit('U. S. Geological Survey'),
    //   // minimumLevel: 0,
    //   maximumLevel: 12
    // });

    let viewer = new Cesium.Viewer("map3d", {
      imageryProvider: new Cesium.TileMapServiceImageryProvider({
        url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
      }),
      terrainProvider: terrain,
      animation: false,//是否创建动画小器件，左下角仪表
      timeline: false,//是否显示时间轴
      sceneModePicker: true,//是否显示3D/2D选择器
      baseLayerPicker: false,//是否显示图层选择器
      geocoder: false,//是否显示geocoder小器件，右上角查询按钮
      scene3DOnly: false,//如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
      navigationHelpButton: false,//是否显示右上角的帮助按钮
      homeButton: true,//是否显示Home按钮
      infoBox: true,//是否显示信息框
      showRenderLoopErrors: false//如果设为true，将在一个HTML面板中显示错误信息
    });
    // //强制隐藏cesium控件版权信息
    // viewer._cesiumWidget._creditContainer.style.display = "none";

    //调试信息：FPS帧数
    viewer.scene.debugShowFramesPerSecond = true;

    let layers = viewer.scene.imageryLayers;

    //叠加本地瓦片地图
    layers.addImageryProvider(imageprovider);

    //
    //layers.addImageryProvider(ne50mLandLayer);

    //叠加本地标签瓦片图层
    layers.addImageryProvider(labellayer);

    //叠加北京市高清局部地图
    layers.addImageryProvider(beijingLayer);

    //叠加logo图层
    this.logoLayerProvider = new Cesium.SingleTileImageryProvider({
      url: '/static/logo.png',
      rectangle: Cesium.Rectangle.fromDegrees(100.0, 41.0, 115.0, 42.75)
    })
    this.logoLayer = layers.addImageryProvider(this.logoLayerProvider)
    this.logoLayer.alpha = this.logoLayerAlpha

    this.myEntities.beijing = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(116.39, 39.9),
      billboard: {
        image: "/static/images/circle.png",
        // sizeInMeters: true,
      },
    });

    const BeijingPosition = Cesium.Cartesian3.fromDegrees(116.39, 39.9, 5000000/40*40);
    viewer.camera.flyTo({
      destination: BeijingPosition
    })
    this.viewer = viewer;
  }
}
</script>

<style lang="stylus" scoped>
@import 'cesium/Build/Cesium/Widgets/widgets.css'
.container
  width: 100%
  position: relative
  .box-card
    width: 300px

  h1.pageTitle
    text-align: center
    color: red
  .toolboxContainer
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%

    .myToolbox
      user-select: none
      width: 220px
      //float: right
      left: 5px
      top: 5px
      //box-shadow: black 0 3px 14px
      //color: white
      //background: rgba(0, 0, 0, 0.75)
      //padding: 10px 15px
      //border: 1px solid rgba(128, 128, 128, 0.5)
      //border-radius: 6px

  #toolbox1
    z-index: 1
    table
      padding-right: 15px
      //border: solid black
      width: 100%
      td.mySliderLabelText
        text-align: right
        width: 60%
      td.mySlider
        width: 40%

  .mapTest
    border: 1px solid red
    text-align: left
    #map3d
      height: 100%
      width: 100%
</style>
